<template>
  <div class="HomeWrap">
    <div class="bg">
      <img
        class="yunBg"
        :src="getImageUrl(clear0)"
        alt=""
      
        v-for="condition in conditions"
        :key="condition.id"
        v-if="clear0 == condition.show[0]"
      />
      <div class="centertop">
        <div>
          <div @click="clickArea">
            {{ cityName }}{{ areaName }}
            <img src="../assets/newhome/tianqiicon/map.png" alt="" />
          </div>
          <img
            @click="caozuozhinan"
            class="lineLeftl"
            src="../assets/shu1.png"
            alt=""
          />
          <img
            class="rightfl"
            @click="toPage('regionalManagement')"
            src="../assets/newhome/tianqiicon/xiaoxi.png"
            alt=""
          />
        </div>
      </div>
      <div class="centertopbott">
        <div class="temNum">
          <span>{{ temperature }}°</span>
        </div>
        <div class="unitArea">
          <span>{{ phrase }}</span>
        </div>
        <div class="dismiaoshu">{{ narrative }}</div>
      </div>
      <div class="center">
        <div v-for="(item, index) in weatherInfo" :key="index">
          <span
            ><img
              :src="require(`../assets/newhome/tianqiicon/${item.icon}.png`)"
              alt=""
          /></span>
          <span class="wenzitop">{{ item.skzdzs }}</span>
          <span class="wenzi">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="qitian" v-if="wendulist.length != 0">
      <div class="toptext">
        <div class="tody" @click="tiqiclick = 0">一周预报</div>
      </div>
      <div class="bottomtext">
        <div
          :class="tiqiclick == index ? 'rainactive' : 'rain'"
          v-for="(item, index) in wendulist"
          :key="index"
          @click="tianqiclick(index)"
        >
          <span class="raintop">{{
            datlist == item.week
              ? "今天"
              : wekm == item.week
              ? "明天"
              : item.week
          }}</span>
          <div
            v-for="(value, key) in weatherImages"
            :key="key"
            class="newimage"
            v-if="item.phrase_img == key"
          >
            <img class="img" :src="value" alt="" />
          </div>
          <span class="rainbottom">{{ item.temp }}</span>
        </div>
      </div>
    </div>

    <Meteorologicaldataresources
      :title="'气象数据资源'"
      :list="list"
      :imgBg="'qxzy'"
    >
      <template v-slot:message> 消息订阅 </template>
    </Meteorologicaldataresources>
    <Meteorologicaldataresources
      :title="'气象条件分析'"
      :list="list1"
      :imgBg="'qxtjfx'"
    >
    </Meteorologicaldataresources>
    <Meteorologicaldataresources
      :title="'作业现场气象服务'"
      :list="list2"
      :imgBg="'sbdyj'"
    >
    </Meteorologicaldataresources>
    <comArea
      v-if="showArea"
      :add="add"
      @closeEmit="showArea = false"
      @confirmEmit="confirmEmitMet"
      :arr="arr"
    >
    </comArea>
  </div>
</template>
<script>
import bigRectangle from "@/assets/bigRectangle.png";

import rectangle from "@/assets/rectangle.png";
import weatherShow from "@/components/home/weatherShow";
import area from "@/components/mixins/area.js";
import Meteorologicaldataresources from "../components/Meteorologicaldataresources/index.vue";
import meteoroHomeApi from "@/service/home.js";
import meteoroHomeApi1 from "@/service/regionalManagement.js";
import map from "@/util/map.js";

export default {
  mixins: [area],
  data() {
    return {
      add: "",
      data: [],
      datlist: "",
      wekz: "",
      wekm: "",

      arr: [],
      list: [
        {
          name: "实况数据",
          src1: "sksj",
          togo: "liveData",
        },
        {
          name: "预报数据",
          src1: "ybsj",
          togo: "earlyWarning",
        },
        {
          name: "灾害预警",
          src1: "zhyj",
          togo: "dwWarnEarth",
        },
        {
          name: "历史数据",
          src1: "lssj",
          togo: "historyData",
        },
      ],
      list1: [
        {
          name: "实况统计",
          src1: "sksj",
          togo: "staLiveData",
        },
        {
          name: "综合统计",
          src1: "zhtj",
          togo: "staCompre",
        },
        {
          name: "灾害统计",
          src1: "zhtj1",
          togo: "staDisaster",
        },
      ],
      list2: [
        {
          name: "运检决策",
          src1: "yjjc",
          togo: "decision",
        },
        {
          name: "现场灾情",
          src1: "xczq",
          togo: "rongzai",
        },
        {
          name: "容灾能力",
          src1: "rznl",
          togo: "power",
        },
        {
          name: "天气推演",
          src1: "tqdh",
          togo: "weather",
        },
      ],
      itemindex: 0,
      clear: true,
      clear0: 0, //0晴天 1多云 2雨 3 雷雨 4 雪  5 雨夹雪
      upData: true,
      weatherImages: {
        qing: require("../assets/newhome/tianqiicon/qing.png"),
        lei: require("../assets/newhome/tianqiicon/leizhenyu.png"),
        shachen: require("../assets/tq/shachen.png"),
        wu: require("../assets/newhome/tianqiicon/wu.png"),
        xue: require("../assets/newhome/tianqiicon/xue.png"),
        yin: require("../assets/newhome/tianqiicon/yintian.png"),
        yu: require("../assets/newhome/tianqiicon/dayu.png"),
        yun: require("../assets/newhome/tianqiicon/duoyun.png"),
      },

      conditions: [
        {
          id: 1,
          src: require("../assets/newhome/duoyun.png"),
          show: [1],
        },
        {
          id: 2,
          src: require("../assets/newhome/qing.png"),
          show: [0],
        },
        {
          id: 3,
          src: require("../assets/newhome/yu.png"),
          show: [2],
        },
        {
          id: 4,
          src: require("../assets/newhome/xue.png"),
          show: [4],
        },
        {
          id: 5,
          src: require("../assets/newhome/wu.png"),
          show: [6],
        },
        {
          id: 6,
          src: require("../assets/newhome/wumai.png"),
          show: [8],
        },
        {
          id: 7,
          src: require("../assets/newhome/shanchenbao.png"),
          show: [7],
        },
        {
          id: 8,
          src: require("../assets/newhome/yin.png"),
          show: [9],
        },
      ],
      index: 0,
      tiqiclick: 0,
      bigRectangle: bigRectangle,
      temperature: 23,
      rectangle: rectangle,
      string: "",
      wendulist: [],
      weatherInfo: [
        {
          icon: "shidu",
          skzdzs: "0",
          name: "湿度(%RH)",
        },
        {
          icon: "jiangshiliang",
          skzdzs: "0",
          name: "24小时降水(mm)",
        },
        {
          icon: "fengsu",
          skzdzs: "0",
          name: "风速(m/s)",
        },
      ],
      mapScriptLoad: false,
      dateOfWeek: "周一",
      phrase: "",
      narrative: "",
      LongAndLati: {
        lng: "",
        lat: "",
      },
    };
  },

  activated() {
    if (this.$route.params.blon == true) {
      this.getnewhome();
      this.tiqiclick = 0;
      if (
        this.$store.getters.location.length == 0 ||
        this.$store.getters.cityLongAndLati.length == 0
      ) {
        return;
      } else {
        this.cityName = this.$store.getters.location[1].name;
        this.areaName = this.$store.getters.location[2].name;
        this.LongAndLati.lng = this.$store.getters.cityLongAndLati[0];
        this.LongAndLati.lat = this.$store.getters.cityLongAndLati[1];

        this.initApi();

        this.initData();
      }
    }
  },
  created() {
    this.tiqiclick = 0;
    if (
      this.$store.getters.location.length == 0 ||
      this.$store.getters.cityLongAndLati.length == 0
    ) {
      return;
    } else {
      this.cityName = this.$store.getters.location[1].name;
      this.areaName = this.$store.getters.location[2].name;
      this.LongAndLati.lng = this.$store.getters.cityLongAndLati[0];
      this.LongAndLati.lat = this.$store.getters.cityLongAndLati[1];
      this.getnewhome();
      this.initApi();

      this.initData();
    }
  },

  watch: {
    showArea: {
      immediate: true,
      handler(val, old) {
        if (this.showArea == true) {
          this.add = "确定";
        }
      },
    },
    itemindex() {
      this.data.forEach((item, index) => {
        if (this.itemindex == index) {
          this.cityName = item.provinceName;
          this.areaName = item.cityName;
        }
      });
    },
  },
  components: {
    weatherShow,
    Meteorologicaldataresources,
  },

  methods: {
    getImageUrl(conditionId) {
      const condition = this.conditions.find((c) =>
        c.show.includes(conditionId)
      );
      return condition ? condition.src : "";
    },
    clickArea() {
      this.arr = [this.cityName, this.areaName];
      this.showArea = true;
    },
    confirmEmitMet(value) {
      var _this = this;
      _this.showArea = false;
      _this.$util.Convertlatitude(value).then((result) => {
        _this.LongAndLati.lng = result[0];
        _this.LongAndLati.lat = result[1];
        _this.cityName = value[1].name;
        _this.areaName = value[2].name;
        var areaSelectValue = [
          {},
          { name: value[1].name },
          { name: value[2].name },
        ];
        _this.$store.dispatch("setLocation", areaSelectValue);
        _this.$store.dispatch("setCityLongAndLati", result);
        _this.arr = [_this.cityName, _this.areaName];
        _this.initData();
      });
    },
    toPage(item) {
      this.$router.push(item);

      if (item == "undfind") {
        return this.$toast("暂未开放，敬请期待！");
      }
      if (item != "" && item != "undfind") {
        if (this.$store.getters.location.length == 0) {
          this.$toast("未获取到位置信息，请从左上角进行选择！");
          return;
        }
        // this.$router.push(item)
      } else {
        this.$toast("暂未开放，敬请期待！");
      }
    },
    tianqiclick(index) {
      this.tiqiclick = index;
    },
    caozuozhinan() {
      this.$router.push("pdf");
    },
    // https://igw.isgcc.net:18081   uat
    //ww445f8033443a14aa   uat
    // //获取code
    // getWxCode() {
    //   var sURL = "https://igw.sgcc.com.cn/connect/oauth2/authorize?";
    //   sURL += "appid=ww4d11a39991ebffdc";
    //   sURL +=
    //     "&redirect_uri=" +
    //     encodeURIComponent("http://111.198.60.33:8888/#/Home");
    //   sURL += "&response_type=code";
    //   sURL += "&scope=SCOPE";
    //   sURL += "&state=STATE";
    //   sURL += "&agentid=1008177";
    //   sURL += "#wechat_redirect";
    //   location.href = sURL;
    // },
    // //获取用户信息
    // getIscToken() {
    //   function getQuery(val) {
    //     const w = location.hash.indexOf("?");
    //     const query = location.hash.substring(w + 1);
    //     const vars = query.split("&");
    //     for (let i = 0; i < vars.length; i++) {
    //       const pair = vars[i].split("=");
    //       if (pair[0] == val) {
    //         return pair[1];
    //       }
    //     }

    //     return val;
    //   }

    //   this.paramValue = getQuery("code");

    //   var params = {
    //     CODE: this.paramValue,
    //     appId: "1008177",
    //   };
    //   $.ajax({
    //     // url: `https://igw.isgcc.net:18443/proxy/getUserByIgwCode`,  uat
    //     url: `https://id.sgcc.com.cn:10443/igwmobile/proxy/getUserByIgwCode`,
    //     contentType: "application/json;charset=utf-8",
    //     type: "POST",
    //     data: JSON.stringify(params),
    //     datatype: "json",
    //     async: false,
    //     cache: false,
    //     success: function (res) {
    //       meteoroHomeApi
    //         .getcode({
    //           userCodeInfo: res.data,
    //         })
    //         .then((res) => {
    //           this.$store.commit("setuserid", res.data.userId);
    //         })
    //         .catch((error) => {
    //           console.log(error);
    //         });
    //     },
    //   });
    // },
    getnewhome() {
      var currentDate = new Date();
      var days = currentDate.getDay();

      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];

      this.wekz = weekDays[(days + 6) % 7]; // 前一天的星期
      this.datlist = weekDays[days]; // 当前天的星期

      if (days === 6) {
        this.wekm = "星期日";
      } else {
        this.wekm = weekDays[(days + 1) % 7]; // 后一天的星期
      }

      meteoroHomeApi
        .Theweather({ city: this.cityName, cnty: this.areaName })
        .then((res) => {
          this.wendulist = res;
        });
    },

    toPagelogin() {
      window.open("/htmlModel", "_blank"); //跳转新页面
    },

    clickitem(item, index) {
      this.itemindex = index;

      this.cityName = item.provinceName;
      this.areaName = item.cityName;
    },
    initApi() {
      var params = {
        userId: this.$store.getters.userid,
      };
      meteoroHomeApi1
        .cityWeather(params)
        .then((res) => {
          this.data = res.data;
          this.$toast.clear();
        })
        .catch((error) => {
          this.$toast.clear();
        });
    },

    initMap() {
      var _this = this;

      map.init().then((res) => {
        _this.$toast.clear();
        _this.mapScriptLoad = true;

        _this.initGeolocation();

     
        _this.initData();
      });
    },
    initData() {
      this.showLoading();

      if (this.cityName == "选择区域" || this.areaName == "选择区域") {
        return;
      }

      const params24 = {
        skzdzsLat: this.LongAndLati.lat,
        skzdzsLon: this.LongAndLati.lng,
        skzdzsCity: this.cityName,
        skzdzsCnty: this.areaName,
      };

      meteoroHomeApi
        .get24Horse(params24)
        .then((res) => {
          this.updateWeatherInfo(res);
          this.getnewhome();
          this.clearLoading();
          // this.$toast("定位成功！");
        })
        .catch((error) => {
          console.log(error);
          this.clearLoading();
          this.$toast("定位失败！");
        });
    },

    showLoading() {
      //   this.$toast.loading({
      //     message: '加载中...',
      //     forbidClick: true,
      //     duration: 0,
      //   })
    },

    clearLoading() {
      this.$toast.clear();
    },

    updateWeatherInfo(res) {
      this.temperature = res.skzdzsTem;

      const clearMap = {
        qing: 0,
        yun: 1,
        yu: 2,
        leiyu: 3,
        xue: 4,
        yujiaxue: 5,
        wu: 6,
        wumai: 8,
        shachenbao: 7,
        yin: 9,
      };

      this.clear0 = clearMap[res.desc];

      // 温度
      for (let key in res) {
        if (typeof res[key] === "number") {
          res[key] = res[key].toString();
        }
      }

      if (res.skzdzsWinsavg10mi.includes("999")) {
        res.skzdzsWinsavg10mi = "--";
      }
      if (res.skzdzsRhu.includes("999")) {
        res.skzdzsRhu = "--";
      }
      if (res.skzdzsPre24 == undefined) {
        res.skzdzsPre24 = 0;
      } else {
        if (res.skzdzsPre24.includes("999")) {
          res.skzdzsPre24 = "--";
        }
      }

      this.weatherInfo.forEach((it) => {
        if (it.name == "湿度(%RH)") {
          it.skzdzs = res.skzdzsRhu;
        } else if (it.name == "24小时降水(mm)") {
          it.skzdzs = res.skzdzsPre24;
        } else {
          it.skzdzs = res.skzdzsWinsavg10mi;
        }
      });
    },

    initGeolocation() {
      this.string = "开始定位...";
      this.$toast.loading({
        message: "开始定位...",
        forbidClick: true,
        duration: 0,
      });

      SGMap.plugin(["SGMap.GeolocationTask"]).then(() => {
        const GeolocationTask = new SGMap.GeolocationTask({
          useIp: true,
          positionOptions: {
            timeout: 5000,
            enableHighAccuracy: true,
          },
        });

        GeolocationTask.getLocation()
          .then(async (data) => {
            this.$toast.clear();

            const [lng, lat] = data[0];
            this.LongAndLati.lng = lng;
            this.LongAndLati.lat = lat;

            const dataLBS = data[0];
            const location = await this.$util.lngLatToLocation(
              dataLBS[0],
              dataLBS[1]
            );

            if (location.regeocodes[0].addressComponent.province !== "山西省") {
              this.$toast("定位失败，请手动选择位置");
              this.showArea = true;
            } else {
              this.$store.dispatch("setCityLongAndLati", dataLBS);

              const areaSelectValue = [undefined, { name: "" }, { name: "" }];
              areaSelectValue[1].name =
                location.regeocodes[0].addressComponent.city;
              areaSelectValue[2].name =
                location.regeocodes[0].addressComponent.district;

              this.$store.dispatch("setLocation", areaSelectValue);
              this.cityName = location.regeocodes[0].addressComponent.city;
              this.areaName = location.regeocodes[0].addressComponent.district;
              this.arr = [this.cityName, this.areaName];
              this.initData();
            }
          })
          .catch((e) => {
            this.$toast.clear();
            this.$toast("定位失败，请手动选择位置");

            this.showArea = true;
            this.string = "error" + e.message;
          });
      });
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.bg {
  width: 100%;
  height: 410px;
  position: relative;
  .yunBg {
    width: 100%;
    height: 100%;
  }
  .centertopbott {
    position: absolute;
    width: 100%;
    height: 150px;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 150px;

    text-align: center;
    .temNum {
      position: absolute;
      width: 100%;
      top: 20px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 100px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
    }
    .unitArea {
      width: 100%;
      position: absolute;
      font-size: 16px;
      left: 68px;
      top: 101px;
      font-weight: 500;
      color: #ffffff;
    }
    .dismiaoshu {
      position: absolute;
      font-size: 13px;
      width: 345px;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 170px;
      text-align: center;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .centertop {
    position: absolute;
    height: 30px;
    width: 100%;

    top: 55px;
    padding-right: 5px;
    font-size: 18px;

    font-weight: 500;
    color: #ffffff;
    text-align: center;

    .rightfl {
      position: absolute;
      top: 0;
      right: 5px;
    }
    .lineLeftl {
      position: absolute;
      top: 0;
      right: 30px;
    }
    img {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }
  }
  .center {
    position: absolute;
    bottom: -85px;
    left: 50%;
    display: flex;
    justify-content: space-evenly;
    transform: translate(-50%, -50%);
    width: 345px;
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(170, 177, 187, 0.3);
    border-radius: 20px;
    font-weight: 400;
    color: #101010;
    div {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      span {
        display: block;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .wenzi {
        font-size: 12px;

        font-weight: 400;
        color: #bcbcbc;
      }
      .wenzitop {
        font-size: 17px;

        font-weight: 500;
        color: #101010;
      }
    }
  }
}
.qitian {
  position: relative;
  width: 345px;
  top: 135px;
  left: 50%;
  transform: translate(-50%, -50%);

  .toptext {
    display: flex;
    font-size: 15px;

    font-weight: 500;
    color: #101010;
    .tody {
      padding: 3px;
      margin-right: 25px;
      border-bottom: 2px solid #357cff;
    }
    .todyactive {
      padding: 3px;
      margin-right: 25px;
      border-bottom: 2px solid transparent;
    }
    .weilai {
      padding: 3px;
      margin-right: 25px;
      border-bottom: 2px solid #357cff;
    }
    .weilaiactive {
      padding: 3px;
      margin-right: 25px;
      border-bottom: 2px solid transparent;
    }
  }
  .bottomtext {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 9px;
    .rain {
      width: 70px;
      height: 130px;
      padding: 3px;
      color: #101010;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 13px;
      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
      border-radius: 33px;
      .raintop {
        font-size: 12px;

        font-weight: 400;
        color: #a0a3ab;
      }
      .rainbottom {
        font-size: 12px;

        font-weight: 500;
        color: #101010;
      }
    }
    .rainactive {
      width: 70px;
      height: 130px;
      padding: 3px;
      color: #101010;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 13px;
      background: #357cff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
      border-radius: 33px;
      .raintop {
        font-size: 12px;

        font-weight: 400;
        color: #fff;
      }
      .rainbottom {
        font-size: 12px;

        font-weight: 500;
        color: #fff;
      }
    }
  }
}

.HomeWrap {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  top: 0;
  background: #f9fafd;
  .indexBg {
    width: 100%;
  }

  .itemclass {
    margin-left: 2px;
  }

  .newimage {
    width: 30px;
    height: 30px;
    margin-top: 3px;
    margin-bottom: 3px;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  // .jrain::-webkit-scrollbar {/*滚动条整体样式*/
  //     width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
  //     height:3.5px;

  // }

  .jrain::-webkit-scrollbar {
    display: none;
  }
  .jrain {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 130px;
    // background-color:pink;

    .jrainsun {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 21px;
      font-size: 15px;
      line-height: 40px;
      flex: 0 0 50px;
      // background-color: aquamarine;
      span {
        font-size: 14px;
      }
    }
  }

  //   .yunBg {
  //     position: absolute;
  //     left: 0;
  //     .px2rem(top, 10px);
  //     width: 100%;
  //     background-size: cover;
  //   }
  //   .yunBg1 {
  //     position: absolute;
  //     left: 0;

  //     width: 100%;
  //     background-size: cover;
  //   }

  .factorBg {
    position: absolute;
    left: 0;
    .px2rem(top, 300px);
    width: 100%;
  }

  .bottomBg {
    position: absolute;
    left: 0;
    .px2rem(bottom, 0px);
    width: 100%;
  }

  .ContentArea {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0);
    height: 100%;
    padding: 0 10px;
    z-index: 2;
  }

  .positionArea {
    width: 100%;
    .px2rem(margin-top, 30px);
    color: white;
    font-size: 19px;
    .lineLeft {
      position: absolute;
      right: 20%;
      width: 15px;
      vertical-align: middle;
      margin-bottom: 2px;
    }
    .lineLeftl {
      position: absolute;
      right: 30%;
      width: 20px;
      vertical-align: middle;
      margin-bottom: 2px;
    }

    .lineRight {
      position: absolute;
      right: 10%;
      height: 16px;
      vertical-align: middle;
      margin-bottom: 2px;
    }

    .areaLine span {
      color: white;
      vertical-align: middle;
      margin-left: 5px;
      font-weight: 600;
    }

    .posiCntyArea {
      font-size: 29px;
      margin-top: 10px;
      margin-bottom: 5px;
      height: 250px;
    }

    .dotArea img {
      width: 14px;
      padding-right: 5px;
      margin-bottom: 10px;
    }
  }

  .warnArea {
    margin-left: 10px;
    font-size: 14px;

    .warn {
      margin-left: 10px;
    }
  }

  .otherWeatherArea {
    font-size: 12px;
    height: 100px;
    margin-top: 28px;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding-top: 4px;
  }

  .lineChartFind {
    position: absolute;

    left: 8%;
    letter-spacing: 3px;
    font-size: 14px;
  }

  .lineChartArea {
    height: 100px;

    margin-bottom: 50px;
  }

  .inletArea {
    height: 100px;
    margin-top: 30px;
    padding: 0 10px;
    font-size: 16px;
    .px2rem(font-size, 16px);

    .inletTit {
      font-weight: bold;
      margin-bottom: 20px;
    }

    .inletLine {
      overflow: hidden;
      margin-bottom: 30px;

      .inletLineCom {
        width: 45%;
        color: white;
        height: 100%;
        font-size: 15px;

        font-weight: 400;
        color: #101010;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding: 12px 10px;
        box-sizing: border-box;

        img,
        span {
          vertical-align: middle;
        }
      }

      .inletLineLeft {
        float: left;
      }

      .inletLineRight {
        float: right;
      }

      .inletLineImg {
        width: 25px;
      }

      .inletLineName {
        .px2rem(margin-left, 25px);
      }
    }
  }

  .bottomCon {
    position: absolute;
    .px2rem(bottom, 30px);
    left: 0;
    right: 0;

    text-align: center;
    font-size: 14px;
  }
}
a {
  font-size: 15px;

  font-weight: 400;
  color: #101010;
}
</style>
